<!--
 * @Description: 在职员工总数
 * @Author: Huang Junjie
 * @Date: 2021-10-19 11:44:32
 * @LastEditTime: 2021-10-20 23:04:06
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="content-card">
    <div class="title">
      在职员工总数
      <i class="el-icon-more" />
    </div>
    <div class="num-card">
      <div class="item">
        <div>正式员工</div>
        <div class="num">{{ statisticsData.formalStaffs }}</div>
      </div>
      <div class="item-last">
        <div>临时（其它）员工</div>
        <div class="num">{{ statisticsData.otherStaffs }}</div>
      </div>
    </div>
    <div class="subtitle">
      岗位统计
      <i class="el-icon-more" />
    </div>

    <!-- 岗位统计图表 -->
    <div
      id="ColumnChart01"
      v-loading="loading"
      class="echart01"
    />
    <!-- 岗位统计图表 -->

    <div class="subtitle">
      工种统计排名
      <i class="el-icon-more" />
    </div>

    <!-- 工种统计排名图表 -->
    <div
      v-loading="loading"
      class="echart02-div"
    >
      <div
        v-show="showOther"
        id="PieChart01Other"
        class="echart02-other"
      />
      <div
        v-show="!showOther"
        id="PieChart01"
        class="echart02"
      />

      <!-- 其他排名列表 -->
      <div
        v-show="showOther"
        class="other-list"
      >
        <div class="other-list-title">其他排名</div>
        <el-scrollbar>
          <div
            v-for="(item, index) in statisticsData.otherList"
            :key="`a${index}`"
            class="other-list-item"
          >
            <div class="circle" />
            <div class="span">{{ item.staffLabelName }}</div>
            <div class="span">{{ (item.percentage * 100).toFixed(2) + '%' }}</div>
          </div>
        </el-scrollbar>
      </div>
      <!-- 其他排名列表 -->

      <!-- 切换查看其他排名按钮 -->
      <el-button
        v-if="!showOther"
        class="show-other-btn"
        size="mini"
        @click="changeShowOther"
      >
        查看其他排名
      </el-button>
      <el-button
        v-if="showOther"
        class="show-other-btn"
        size="mini"
        @click="changeShowOther"
      >
        隐藏其他排名
      </el-button>
      <!-- 切换查看其他排名按钮 -->
    </div>
    <!-- 工种统计排名图表 -->
  </div>
</template>

<script>
import {
  getStaffStatistics,
  getStaffStatisticsDj
} from '@/api/jjxt/data-center-home';
import { ColumnChart01, PieChart01 } from './common/js/EchartsModel';
import { mapGetters } from 'vuex';

// 引入echarts
const echarts = require('echarts');

export default {
  name: 'EmplotessTotal',
  props: {
    unitCodeParams: {
      type: String,
      default() {
        return '';
      }
    },
    mCode: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      // loading
      loading: false,

      // 其他排名开关
      showOther: false,

      // 统计数据
      statisticsData: {
        formalStaffs: 0,
        otherStaffs: 0,
        echart01: {
          xAxisData: [],
          seriesData: []
        },
        echart02Data: [],
        otherList: []
      }
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {
    unitCodeParams() {
      this.statisticsData = {
        formalStaffs: 0,
        otherStaffs: 0,
        echart01: {
          xAxisData: [],
          seriesData: []
        },
        echart02Data: [],
        otherList: []
      };
      this.getColumnChart01(); // 加载岗位统计Echarts图表
      this.getPieChart01(); // 加载工种统计排名Echarts图表
      // if：供电部账号登录
      if (this.unitCodeParams === 'gd') {
        this.getStaffStatistics(); // 查询在职员工统计情况（局级）
      } else if (this.unitCodeParams !== '') {
        this.getStaffStatisticsDj(); // 查询在职员工统计情况（段级）
      }
    }
  },
  methods: {
    // 查询在职员工统计情况（局级）
    getStaffStatistics() {
      this.loading = true;
      // 查询在职员工统计情况（局级）
      getStaffStatistics().then(response => {
        this.statisticsData.formalStaffs = response.data.formalStaffs.toLocaleString();
        this.statisticsData.otherStaffs = response.data.otherStaffs.toLocaleString();
        this.statisticsData.echart01 = {
          xAxisData: ['领导', '干部', '职工'],
          seriesData: [response.data.leaders, response.data.cadres, response.data.workers]
        };
        this.getColumnChart01(); // 加载岗位统计Echarts图表
        this.echart02Data = [];
        this.statisticsData.otherList = [];
        let valueData = 0;
        response.data.staffLabels.forEach((val, key) => {
          if (key === 0) {
            this.statisticsData.echart02Data.push({ value: val.staffLabelNumber, name: val.staffLabelName, itemStyle: { color: '#ffcc00' }, selected: true });
          }
          if (key === 1) {
            this.statisticsData.echart02Data.push({ value: val.staffLabelNumber, name: val.staffLabelName, itemStyle: { color: '#98d87d' }});
          }
          if (key === 2) {
            this.statisticsData.echart02Data.push({ value: val.staffLabelNumber, name: val.staffLabelName, itemStyle: { color: '#ffd86e' }});
          }
          if (key === 3) {
            this.statisticsData.echart02Data.push({ value: val.staffLabelNumber, name: val.staffLabelName, itemStyle: { color: '#ff99cc' }});
          }
          if (key > 3) {
            valueData += val.staffLabelNumber;
            this.statisticsData.otherList.push(val);
          }
        });
        if (response.data.staffLabels.length > 3) {
          this.statisticsData.echart02Data.push({ value: valueData, name: '其他', itemStyle: { color: '#8996E6' }});
        }
        this.loading = false;
        this.getPieChart01(); // 加载工种统计排名Echarts图表
      }).catch(() => {
        this.loading = false;
      });
    },

    // 查询在职员工统计情况（段级）
    getStaffStatisticsDj() {
      this.loading = true;
      // 查询在职员工统计情况（段级）
      getStaffStatisticsDj({
        unitCodeParams: this.unitCodeParams,
        deptNo: this.mCode
      }).then(response => {
        this.statisticsData.formalStaffs = response.data.formalStaffs.toLocaleString();
        this.statisticsData.otherStaffs = response.data.otherStaffs.toLocaleString();
        this.statisticsData.echart01 = {
          xAxisData: ['领导', '干部', '职工'],
          seriesData: [response.data.leaders, response.data.cadres, response.data.workers]
        };
        this.getColumnChart01(); // 加载岗位统计Echarts图表
        this.echart02Data = [];
        this.statisticsData.otherList = [];
        let valueData = 0;
        response.data.staffLabels.forEach((val, key) => {
          if (key === 0) {
            this.statisticsData.echart02Data.push({ value: val.staffLabelNumber, name: val.staffLabelName, itemStyle: { color: '#ffcc00' }, selected: true });
          }
          if (key === 1) {
            this.statisticsData.echart02Data.push({ value: val.staffLabelNumber, name: val.staffLabelName, itemStyle: { color: '#98d87d' }});
          }
          if (key === 2) {
            this.statisticsData.echart02Data.push({ value: val.staffLabelNumber, name: val.staffLabelName, itemStyle: { color: '#ffd86e' }});
          }
          if (key === 3) {
            this.statisticsData.echart02Data.push({ value: val.staffLabelNumber, name: val.staffLabelName, itemStyle: { color: '#ff99cc' }});
          }
          if (key > 3) {
            valueData += val.staffLabelNumber;
            this.statisticsData.otherList.push(val);
          }
        });
        if (response.data.staffLabels.length > 3) {
          this.statisticsData.echart02Data.push({ value: valueData, name: '其他', itemStyle: { color: '#8996E6' }});
        }
        this.loading = false;
        this.getPieChart01(); // 加载工种统计排名Echarts图表
      }).catch(() => {
        this.loading = false;
      });
    },

    // 加载岗位统计Echarts图表
    getColumnChart01() {
      const myChart = echarts.init(document.getElementById('ColumnChart01'));
      ColumnChart01(myChart, this.statisticsData.echart01.xAxisData, this.statisticsData.echart01.seriesData); // 岗位统计 - 柱状图
    },

    // 加载工种统计排名Echarts图表
    getPieChart01() {
      if (this.showOther) {
        const myChart01 = echarts.init(document.getElementById('PieChart01Other'));
        PieChart01(myChart01, this.showOther, this.statisticsData.echart02Data); // 工种统计排名 - 饼状图
      } else {
        const myChart02 = echarts.init(document.getElementById('PieChart01'));
        PieChart01(myChart02, this.showOther, this.statisticsData.echart02Data); // 工种统计排名 - 饼状图
      }
    },

    // 切换是否开启其他排名详细
    changeShowOther() {
      this.showOther = !this.showOther;
      this.$nextTick(() => {
        this.getPieChart01(); // 加载工种统计排名Echarts图表
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-scrollbar {
  position: absolute;
  top: 22px;
  left: 10px;
  right: 0;
  bottom: 0;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.content-card {
  width: 355px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #ebebeb;
  .title {
    color: #666666;
    padding: 5px 0 5px 10px;
    font-weight: 600;
    border-bottom: 1px solid #ebebeb;
    .el-icon-more {
      color: #676767;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
    .el-icon-more:hover {
      color: #54B2FC;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .subtitle {
    font-size: 14px;
    color: #676767;
    padding: 5px 0 5px 10px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    .el-icon-more {
      color: #676767;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
    .el-icon-more:hover {
      color: #54B2FC;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .num-card {
    font-size: 12px;
    color: #676767;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    .item {
      width: 200px;
      line-height: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #ebebeb;
      .num {
        color: #666666;
        font-size: 20px;
        font-weight: 600;
      }
      .num:hover {
        color: #54B2FC;
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .item-last {
      width: 200px;
      line-height: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .num {
        color: #666666;
        font-size: 20px;
        font-weight: 600;
      }
      .num:hover {
        color: #54B2FC;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
  .echart01 {
    width: 100%;
    height: 31%;
    margin: 0 auto;
  }
  .echart02-div {
    position: relative;
    height: calc(100% - 31% - 140px);
    .echart02 {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      margin: 0 auto;
    }
    .echart02-other {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 220px;
      margin: 0 auto;
    }
    .show-other-btn {
      position: absolute;
      top: 5px;
      left: 5px;
      padding: 5px;
    }
    .other-list {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 135px;
      .other-list-title {
        font-size: 14px;
        color: #676767;
        padding: 5px 0;
      }
      .other-list-item {
        display: flex;
        align-items: center;
        width: 100%;
        .circle {
          border-radius: 50%;
          width: 10px;
          height: 10px;
          margin-right: 10px;
          background-color: #676767;
        }
        .span {
          color: #676767;
          font-size: 12px;
          padding: 5px 0 5px 5px;
        }
      }
    }
  }
}
</style>
